<template>
  <div class="container">
    <el-row class="">
      <el-col :span="16" align="left">
        <el-input v-model="data.searchParams.awardApplyName" placeholder="奖项名称" style="width: 120px; margin-right: 15px" />
        <SelectOption :options="options.gldxList" :placeholder="'奖项种类'" @change-value="changeValue"> </SelectOption>

        <div class="conUnitName">
            <el-cascader @change="changeUnit" popper-class="gy-cascader" :options="data.orgAllList"
              :props="data.popupTreeProps" v-model="data.searchParams.applyUnitName" :show-all-levels="false"
              placeholder="请选择申报单位" clearable>
            </el-cascader>
          </div>
        <!-- <SelectOption :options="options.orgAllList" :placeholder="'申报单位'" @change-value="changeValue1"> </SelectOption> -->
        <el-button class="ordinary" @click="search()">搜索</el-button>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="ordinary" @click="getExport()"   v-limit="'KJSL:KJJL:GS:EXPERT'">批量导出</el-button>
      </el-col>
    </el-row>

    <div>
      <Table :tableArr="data.allTableData" :loading="data.isLoading"  :pagination="data.page" :total="data.page.total" :columns="data.columns" @delectTable="delectIds" @currentChange="currentChange" @sizeChange="sizeChange">

        <template #operate="{ row }">
          <el-button size="small" class="ordinary" :disabled="row.islock == 0" @click="handleEdit(row)"  v-limit="'KJSL:KJJL:GS:REWARDS'">查看</el-button>
        </template>
      </Table>
    </div>

    <el-dialog v-model="data.dialogVisible" width="60%" :show-close="false">
      <template #title>
        <div class="my-header" v-loading="data.detail_loading">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本信息" name="first">
              <Information :detailData="data.detailData"></Information>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import * as proxy from "@/constants/proxy"
import request from "@/utils/request"
import Api from '@/views/science/api/awards'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import Table from '@/views/science/components/table/table.vue'
import { Modals } from '@/views/science/components/tips/tips'
import moment from 'moment'
import { onMounted, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import Information from './information.vue'
import tableData from './tableHeader.json'


export default {
  components: {
    SelectOption,
    Table,
    Information,
  },
  setup() {
    onMounted(() => {
      getOrgList();
    });
    const store = useStore()
    const activeName = ref('first')
    let data = reactive({
      orgAllList:[],
      popupTreeProps: {
        label: 'name',
        children: 'children',
        value: 'id',
        checkStrictly: true,
      },
      dialogVisible: false,
      addFlag: 0,
      recordShow: false,
      isLoading: false,
      detail_loading:false,
      page: { page: 1, limit: 10, total: 0 },
      searchParams: {
        page: 1,
        pageSize: 10,
        awardApplyName: '', // 项目名称
        applyUnitName: '',
        applyClass: '',//申报类型
      },
      selectedRows: [],
      columns: tableData.platformTableHeader,
      ids: [],
      allTableData: [],
      detailData:{},
    })

    const loading = ref(true)//加载

    // 存储下拉框数组的对象
    const options = reactive({
   
   
      gldxList: [
        {
          id: 1,
          itemText: '科技奖项',
          itemValue: '1',
        },
        {
          id: 2,
          itemText: '发明专利',
          itemValue: '2',
        },
        {
          id: 3,
          itemText: '软件著作权',
          itemValue: '3',
        },
        {
          id: 4,
          itemText: '技术标准',
          itemValue: '4',
        },
        {
          id: 5,
          itemText: '技术工法',
          itemValue: '5',
        },
        {
          id: 6,
          itemText: '学术论著',
          itemValue: '6',
        },
        {
          id: 7,
          itemText: '学术论文',
          itemValue: '7',
        }
      ],
    })

    let getOrgList = () => {
      return request({
        url: proxy.CHECC_API_CMS + "/org/getSysOrgList",
        method: "get",
      }).then(res => {
        data.orgAllList = res.data.data
      })
    }


    //主页面表格初始化
    const getListData = () => { // 获取列表数据
      loading.value = true   // 加载
      data.isLoading = true
      Api.getDateList(data.searchParams)
        .then((res) => { // 获取列表数据
          console.log('获取数据列表', res.data.data) // 获取列表数据
          let resData = res.data.data // 获取列表数据
          resData.records.map((item) => {
            if (item.status == 0) {
              item.status = "待提交"
            } else if(item.status == 1) {
              item.status = "待审核"
            }else if(item.status == 2) {
              item.status = "审批通过"
            }else if(item.status == 3) {
              item.status = "驳回"
            }
            if (item.sex == 1) {
              item.sex = "男"
            } else {
              item.sex = "女"
            }
            item.applyTime = moment(item.applyTime).format("YYYY-MM-DD");
          })
          data.allTableData = resData.records   // 获取列表数据
          data.page.total = resData.total   // 获取列表数据
          data.isLoading = false
        })
        .finally(() => { // 获取列表数据
          loading.value = false  // 获取列表数据
        }).catch((error) =>{
          data.isLoading = false
        })
    }

    //详情数据获取
    const detailData = async (id) => {
      data.detail_loading = true
      data.dialogVisible = true

      Api.detailData({
        id:id
      })
        .then((res) => { // 获取列表数据  
          data.detailData = res.data.data.baseInfo
          console.log('detailData', data.detailData );
          
          store.commit('technologyStrength/getachievementINFO', { ...res.data.data.baseInfo })
          // data.participantlist = res.data.data.participantlist
          // data.listurl = res.data.data.listurl
          data.detail_loading = false
          // data.addFlag = 1
        }).catch((error) =>{
          data.detail_loading = false
        })
    }

    const changeValue = (item) => data.searchParams.applyClass = item.itemValue
    const changeValue1 = (item) => data.searchParams.applyUnitName = item.id

    const currentChange = (current) => {
      data.searchParams.page = current
      getListData()
    }

    const sizeChange = (size) => {
      console.log(size)
      data.searchParams.pageSize = size
      getListData()
    }

    const delectIds = (ids) => {
      data.ids = ids
    }

    let changeUnit = (val) => {
      if (val == null) {
        data.searchParams.applyUnitName = ''
        return false
      }
      if (val.length > 0) {
        let unitId = val[val.length - 1]
        data.searchParams.applyUnitName = unitId
      }
    }
    const getExport = () => {//导出
      let msg = '是否导出全部数据'
      if(data.ids.length>0){
        msg = '是否导出所选数据'
      }
      Modals(msg, '提示', 'warning').then(async () => {
        const params = {
          ...data.searchParams,
          ids: data.ids
        }
        await Api.exportgongs(params,"公示")
      }).catch(() => {
        console.log("点击了取消")
      })
      // Modals('是否导出全部数据', '提示', 'warning').then(async () => {
      //   await Api.export(data.searchParams,"公示")
      // }).catch(() => {
      //   console.log("点击了取消")
      // })
    }


    // 点击查询按键，分页设置为当前页为1，
    const search = () => {
      data.page.page = 1
      getListData()
    }


    const handleEdit = (row) => {
      detailData(row.id)
    }

    getListData()

    return {
      data,
      options,
      activeName,
      getOrgList,
      currentChange,
      sizeChange,

      changeValue,
      changeValue1,
      delectIds,
      getExport,
      changeUnit,
      handleEdit,
      search,
    }
  },
}
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}

:deep(.el-dialog__body) {
  display: none;
}

// .el-col {
//   line-height: 40px;
// }

.el-form-item {
  .el-input {
    width: 100px;
  }

  .el-select {
    width: 100px;
  }
}


</style>

<style lang="scss" >
.conUnitName {
  display: inline-block;
  width: 200px;
}

.gy-cascader {
  .el-cascader-node {
    max-width: 250px;
  }
}
</style>
